<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { GoodsItemData, GoodsResponseData, RequestPath, startRequest } from '../base/RequestWork';
import { Action, ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
// 路由管理对象
let router = useRouter()
// 商品列表数据
let tableData = ref()
// 是否还有更多数据可以加载
let hasMore = ref(true)
// 分页偏移
let offset = 0
// 每页获取数据数量
const limit = 5

// 组件挂载时加载商品数据
onMounted(()=>{
    loadData()
})
// 从服务端获取商品数据
function loadData() {
    startRequest(RequestPath.goodsListGet, 'get', {
        offset,
        limit
    }).then((response)=>{
        let data = response.data as GoodsResponseData
        let datas:GoodsItemData[] = tableData.value ?? []
        // 判断返回的数据量是否小于limit，小于则表明没有更多数据了
        hasMore.value = (data.datas ?? []).length >= limit
        // 将返回的数据追加到数据源中
        datas.push(...(data.datas ?? []))
        tableData.value = datas
        // 对offset进行设置
        offset = datas.length
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}
// 更新商品的方法
function updateGoods(goods: GoodsItemData) {
    // 跳转到编辑页面
    router.replace({
        name: 'goodsEdit',
        params:{mode: 1, id: goods.id}
    })
}
// 删除商品的方法
function deleteGoods(goods: GoodsItemData) {
    // 删除操作属于敏感操作，进行二次确认
    ElMessageBox.confirm('确认删除么？', '提示',{
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        callback: (action: Action) => {
            if (action == 'confirm') {
                startRequest(RequestPath.goodsDelete, 'post', {
                    id: goods.id
                }).then((_response)=>{
                    // 删除数据后，刷新页面，重置offset和tableData
                    offset = 0
                    tableData.value = []
                    loadData()
                }).catch((error)=>{
                    ElMessage.error({
                        message: error.response.data.error
                    })
                })
            }   
        }
    })
}

</script>

<template>
    <div class="contentContainer">
        <!-- 列表渲染商品信息 -->
        <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID"  width="80"/>
        <el-table-column label="橱窗图" width="120">
            <template #default="scope">
                <div style="width: 100px; height: 100px; overflow: hidden;">
                    <el-image style="width: 100%; height: 100%;" :src="scope.row.image" fit="fill" />
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="100" />
        <el-table-column prop="brand" label="商品品牌" width="100" />
        <el-table-column prop="description" label="商品描述" width="240"></el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="200"></el-table-column>
        <el-table-column prop="category.name" label="类别" width="80"></el-table-column>
        <el-table-column prop="price" label="价格/元" width="80"></el-table-column>
        <el-table-column prop="discounted_price" label="折扣价/元" width="100"></el-table-column>
        <el-table-column prop="stock" label="库存" width="80"></el-table-column>
        <el-table-column label="状态" width="80">
            <template #default="scope">
                <el-tag  :type="scope.row.status == 0 ? 'info' : 'success'">{{ scope.row.status == 0 ? '未上架' : '已上架' }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作"  width="180">
            <template #default="scope">
                <el-button type="primary" @click="updateGoods(scope.row)">编辑</el-button>
                <el-button type="danger" @click="deleteGoods(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
        <!-- 用来加载下一页数据 -->
        <div v-show="hasMore" style="width: 100%; text-align: center; margin-top: 15px; color: grey;" @click="loadData">点击加载更多</div>
    </div>
</template>